<template>
	<view>
		<!-- tabbar对应页面 -->
		<home v-if="curPage == 1" />
		<jobs v-if="curPage == 2" />
		<housetribe v-if="curPage == 3" />
		<news v-if="curPage == 4" />
		<user v-if="curPage == 5" />
		<enterprisecolumn v-if="curPage == 6" />
		<!-- 自定义tabBar -->
		<view class="tabBarBox">
			<!-- tab-1 -->
			<view class="tabItem" hover-class="none" @tap="toHome">
				<view class="icon">
					<view v-if="curPage == 1" class="iconfont fc-mc fs-56">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab1_active.png"
						></image>
					</view>
					<view v-else class="iconfont seleicon fs-56">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab1.png"
						></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage == 1 ? sTextColor : textColor }">首页</view>
			</view>
			<!-- tab-2 -->
			<view class="tabItem" hover-class="none" @tap="toJob">
				<view class="icon">
					<view v-if="curPage == 2" class="iconfont fc-mc fs-56">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab2_active.png"
						></image>
					</view>
					<view v-else class="iconfont seleicon fs-56">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab2.png"
						></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage == 2 ? sTextColor : textColor }">求职</view>
			</view>
			<!-- midBtn midBtn-->
			<view class="tabItem" hover-class="none" @tap="midBtn">
				<view class="icon">
					<view v-if="curPage == 3" class="iconfont fc-mc fs-56">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab3_active.png"
						></image>
					</view>
					<view v-else class="iconfont seleicon fs-56">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab3.png"
						></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage == 3 ? sTextColor : textColor }">宅部落</view>
			</view>
			<!-- tab-3 -->
			<view class="tabItem" hover-class="none" @tap="toNews">
				<view class="icon">
					<view v-if="curPage == 4" class="iconfont fc-mc fs-50">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab4_active.png"
						></image>
					</view>
					<view v-else class="iconfont seleicon fs-50">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab4.png"
						></image>
					</view>
				</view>
				<view class="text pad-top-6" :style="{ color: curPage == 4 ? sTextColor : textColor }">消息</view>
			</view>
			<!-- tab-4 -->
			<view class="tabItem" hover-class="none" @tap="toMine">
				<view class="icon">
					<view v-if="curPage == 5" class="iconfont fc-mc fs-56">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab5_active.png"
						></image>
					</view>
					<view v-else class="iconfont seleicon fs-56">
						<image
							src="https://i-7xvfsljtcgf3cswfwvr8oss.oss-cn-shenzhen.aliyuncs.com/image/tab5.png"
						></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage == 5 ? sTextColor : textColor }">我的</view>
			</view>
			<!-- 企业圈 -->
			<!-- 			<view class="tabItem" hover-class="none" @tap="toEnterprise">
				<view class="icon">
					<view v-if="curPage==6"  class="iconfont fc-mc fs-56">
						<image src="../../static/qy.png"></image>
					</view>
					<view v-else  class="iconfont seleicon fs-56">
						<image src="../../static/qy.png"></image>
					</view>
				</view>
				<view class="text" :style="{ color: curPage==6?sTextColor:textColor }">企业圈</view>				
			</view> -->
		</view>
	</view>
</template>
<script>
import home from '@/pages/index/index'
import jobs from '@/pages/index/job.vue'
import housetribe from '@/pages/index/houseTribe'
import news from '@/pages/index/chat'
import user from '@/pages/index/user'
import enterprisecolumn from '@/pages/index/enterprisecolumn.vue'
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
	components: {
		home,
		jobs,
		housetribe,
		news,
		user,
		enterprisecolumn
	},
	computed: {
		...mapState(['userInfo']),
		...mapGetters(['hasLogin'])
	},
	data() {
		return {
			//当前页
			curPage: 1,
			//字体颜色
			textColor: '#666',
			//选中字体颜色
			sTextColor: '#84C0F4',
			code: '',
			user_info: [],
			true_name: '',
			access_token: uni.getStorageSync('token'),
			mobile: uni.getStorageSync('mobile'), //手机号
			user_type: uni.getStorageSync('user_type'), //用户类型
			usertype: '',
			userId: uni.getStorageSync('wxuser_id')
		}
	},
	onHide() {},
	onLoad(option) {
		if (option.curPage) {
			this.curPage = option.curPage
		}
	},

	onShow() {},
	mounted() {
		console.log(222)
		//显示分享按钮
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		})
	},
	onShareAppMessage(res) {
		return {
			title: '宿求直聘', // 标题
			path: '/pages/index/tabbar?id=' + this.userId + '&curPage=1', // 分享路径
			/* imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg', // 分享图
				desc: '小程序描述描述描述描述', */
			success: res => {
				console.log(res)
			}
		}
	},
	//朋友圈
	onShareTimeline(res) {
		console.log('分享朋友圈返回值', res)
		return {
			title: '宿求直聘',
			path: '/pages/index/tabbar?id=' + this.userId + '&curPage=1', // 分享路径
			success: res => {
				console.log(res)
			}
		}
	},
	methods: {
		toHome() {
			this.curPage = 1
			uni.setNavigationBarTitle({
				title: '首页'
			})
			this.$forceUpdate()
		},
		toJob() {
			this.curPage = 2
			uni.setNavigationBarTitle({
				title: '求职',
				navigationStyle: 'custom'
			})
			this.$forceUpdate()
		},
		midBtn() {
			this.curPage = 3
			uni.setNavigationBarTitle({
				title: '宅部落'
			})
			this.$forceUpdate()
		},
		toNews() {
			if (this.hasLogin) {
				console.log(11)
				this.curPage = 4
				uni.setNavigationBarTitle({
					title: '消息'
				})
				this.$forceUpdate()
			} else {
				console.log(22)
				this.$mRouter.push({
					route: this.$mRoutesConfig.login,
					query: {}
				})
			}
		},
		toMine() {
			this.curPage = 5
			uni.setNavigationBarTitle({
				title: '我的'
			})
			this.$forceUpdate()
		},

		toEnterprise() {
			this.curPage = 6
			uni.setNavigationBarTitle({
				title: '企业圈'
			})
			this.$forceUpdate()
		}
	}
}
</script>

<style lang="scss" scoped>
.fs-46 {
	font-size: 46rpx;
}

.fs-50 {
	font-size: 48rpx;
}

.fs-56 {
	font-size: 54rpx;
}

.fc-b2 {
	color: #b2b2b2;
}

.pad-top-6 {
	padding-top: 6rpx;
}

.icon-saoyisao {
	color: #fff !important;
	position: absolute;
	top: 25rpx;
	left: -1px;
	right: 0;
	font-size: 50rpx !important;
	text-align: center;
}

.seleicon {
	color: #d8d8d8 !important;
}

.tabBarBox {
	height: 50px;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 99;
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;
	border-top: 1px solid #f5f5f5;

	.tabItem {
		padding: 0;
		flex: 1;
		text-align: center;

		.text {
			font-size: 20rpx;
			color: #666;
		}

		.icon {
			image {
				width: 27px;
				height: 28px;
				position: relative;
				top: 10rpx;
			}
		}
	}

	.tabItem_h {
		background-color: rgba($color: #f7f5f5, $alpha: 0.6);
	}

	/* 中间凸起按钮 */
	.midBtn {
		flex: 1;
		text-align: center;
		position: relative;

		.scan-style {
			position: relative;
			top: -38rpx;
			font-size: 28rpx;
			color: #b2b2b2;
			left: 1px;
		}

		.icon {
			.image {
				display: block;
				width: 100rpx;
				height: 100rpx;
				position: relative;
				bottom: 36rpx;
				background-color: #50be91;
				border-radius: 50%;
				box-shadow: 2rpx 0rpx 12rpx #50be91;
				margin: 0 auto;
			}
		}
	}
}
</style>
